<template>
  <div class="container">
    <el-row type="flex" class="row-bg" justify="space-between" align="middle">
      <el-col :span="6"><h1>患者信息</h1></el-col>
      <el-col :span="6" style="text-align: right;">
        <el-button type="primary" @click="dialogVisible = true">新增患者</el-button>
      </el-col>
    </el-row>

    <!-- 搜索框 -->
    <el-card class="box-card">
      <el-row type="flex" align="middle" :gutter="20" style="margin-bottom: 50px;">
        <el-col :span="6">
          <el-input v-model="searchVal" placeholder="请输入患者姓名" />
        </el-col>
        <el-col :span="18">
          <el-button type="primary" @click="getPatientList">搜索</el-button>
        </el-col>
      </el-row>

      <!-- 患者信息表格 -->
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="患者姓名" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="sex" label="性别" />
        <el-table-column prop="phone" label="联系方式" />
        <el-table-column prop="balance" label="余额" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" circle style="margin-right: 10px;" @click="editPatient(scope.row)">编辑</el-button>
            <el-button type="danger" icon="el-icon-delete" circle @click="deletePatient(scope.row)">删除</el-button>
            <el-button type="primary" icon="el-icon-coin" circle @click="openChargeDialog(scope.row)">充值</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 新增患者的弹窗 -->
      <el-dialog
        title="新增患者"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form :model="patientForm" label-width="100px">
          <el-form-item label="患者姓名">
            <el-input v-model="patientForm.name" />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="patientForm.age" />
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="patientForm.sex" placeholder="请选择性别">
              <el-option label="男" value="male" />
              <el-option label="女" value="female" />
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="patientForm.phone" />
          </el-form-item>
          <el-form-item label="余额">
            <el-input v-model="patientForm.balance" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addPatient">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 修改患者的弹窗 -->
      <el-dialog
        title="修改信息"
        :visible.sync="editDialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form :model="editPatientForm" label-width="100px">
          <el-form-item label="患者姓名">
            <el-input v-model="editPatientForm.name" />
          </el-form-item>
          <el-form-item label="年龄">
            <el-input v-model="editPatientForm.age" />
          </el-form-item>
          <el-form-item label="性别">
            <el-select v-model="editPatientForm.sex" placeholder="请选择性别">
              <el-option label="男" value="male" />
              <el-option label="女" value="female" />
            </el-select>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="editPatientForm.phone" />
          </el-form-item>
          <el-form-item label="余额">
            <el-input v-model="editPatientForm.balance" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="updatePatient(editPatientForm)">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 充值患者的弹窗 -->
      <el-dialog
        title="为患者充值"
        :visible.sync="chargeDialogVisible"
        width="30%"
        :before-close="handleClose"
      >
        <el-form :model="chargeForm" label-width="100px">
          <el-form-item label="患者姓名">
            <el-input v-model="chargeForm.name" disabled />
          </el-form-item>
          <el-form-item label="当前余额">
            <el-input v-model="chargeForm.balance" disabled />
          </el-form-item>
          <el-form-item label="充值金额">
            <el-input v-model="chargeForm.amount" placeholder="请输入充值金额" type="number" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="chargeDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitCharge">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { getAllPatients, createPatient, updatePatient, deletePatient, chargePatient } from '@/api/patient/index'

export default {
  data() {
    return {
      searchVal: '',
      tableData: [],
      dialogVisible: false,
      editDialogVisible: false,
      chargeDialogVisible: false,
      patientForm: {
        name: '',
        age: '',
        sex: '',
        phone: '',
        balance: ''
      },
      editPatientForm: {
        id: null,
        name: '',
        age: '',
        sex: '',
        phone: '',
        balance: ''
      },
      chargeForm: {
        id: null,
        name: '',
        balance: '',
        amount: ''
      }
    }
  },
  mounted() {
    this.getPatientList()
  },
  methods: {
    getPatientList() {
      // 获取患者列表
      getAllPatients().then(res => {
        const data = res['data']
        this.tableData = data['list']
        console.log(this.tableData)
      })
    },
    editPatient(row) {
      // 编辑患者
      this.editPatientForm = { ...row }
      this.editDialogVisible = true
    },
    addPatient() {
      // 添加患者
      createPatient(this.patientForm).then(res => {
        this.$message.success('新增患者成功')
        this.dialogVisible = false
        this.getPatientList() // 刷新列表
        this.patientForm = {}
      })
    },
    updatePatient(row) {
      updatePatient(row).then(res => {
        this.$message.success('修改患者信息成功')
        this.editDialogVisible = false
        this.getPatientList()
      })
    },
    deletePatient(row) {
      this.$confirm('此操作将永久删除该患者信息, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletePatient(row.id).then(res => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          // 刷新列表
          this.getPatientList()
        }).catch((error) => {
          this.$message.error('删除失败')
          console.error(error)
        })
      })
    },
    openChargeDialog(row) {
      // 打开充值对话框
      this.chargeForm = {
        id: row.id,
        name: row.name,
        balance: row.balance,
        amount: ''
      }
      this.chargeDialogVisible = true
      
    },
    submitCharge() {
      // 提交充值请求
      if (!this.chargeForm.amount || this.chargeForm.amount <= 0) {
        this.$message.error('请输入有效的充值金额')
        return
      }

      const newBalance = parseFloat(this.chargeForm.balance) + parseFloat(this.chargeForm.amount)

      chargePatient({
        id: this.chargeForm.id,
        amount: this.chargeForm.amount,
        balance: newBalance
      }).then(res => {
        this.$message.success('充值成功')
        this.chargeDialogVisible = false
        this.getPatientList() // 刷新列表
      }).catch(error => {
        this.$message.error('充值失败')
        console.error(error)
      })
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    }
  }
}
</script>

<style scoped>
/* 样式保持不变 */
</style>
